@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --container-padding: 0;
    --input-padding-vertical: 6px;
    --input-padding-horizontal: 4px;
    --input-margin-vertical: 4px;
    --input-margin-horizontal: 0;
}

body {
    padding: 0 var(--container-padding);
    color: var(--vscode-foreground);
    font-size: var(--vscode-editor-font-size);
    font-weight: var(--vscode-font-weight);
    font-family: var(--vscode-font-family);
}

ol,
ul {
    padding-left: var(--container-padding);
}

a {
    color: var(--vscode-textLink-foreground);
}

a:hover,
a:active {
    color: var(--vscode-textLink-activeForeground);
}

[role="tooltip"] {
    @apply border bg-tab text;

    opacity: 1 !important;
}

.message-wrapper blockquote,
.message-wrapper dd,
.message-wrapper dl,
.message-wrapper ul,
.message-wrapper ol,
.message-wrapper figure,
.message-wrapper h1,
.message-wrapper h3,
.message-wrapper h4,
.message-wrapper h5,
.message-wrapper h6,
.message-wrapper hr,
.message-wrapper p {
    @apply my-2;
}

.message-wrapper h1 {
    @apply text-2xl;
}

.message-wrapper h2 {
    @apply text-2xl;
}

.message-wrapper h3 {
    @apply text-xl;
}

.message-wrapper h4 {
    @apply text-xl;
}

.message-wrapper h5 {
    @apply text-lg;
}

.message-wrapper h6 {
    @apply text-lg;
}

/* horizontally indent any elements that are not code blocks */
.message-wrapper > *:not(pre) {
    @apply mx-4;
}
.message-wrapper p {
    @apply my-2;
}
/* * Markdown lists */
/* Show bullets */
.message-wrapper ul,
.message-wrapper ol {
    @apply list-disc;
}
.message-wrapper li {
    @apply my-2 mx-6;
}
/* Prevent <p> from dropping to next line in bulleted list */
.message-wrapper li > p {
    display: inline;
}

/* CSS Spinner */
.spinner {
    width: 36px;
    text-align: center;
}

.spinner>div {
    width: 4px;
    height: 4px;
    background-color: #888;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.typing {
    font-size: var(--vscode-font-size);
}

.send-element-ext,
.cancel-element-ext {
    font-size: smaller;
}

@-webkit-keyframes blink {
    to {
        visibility: hidden
    }
}

@keyframes blink {
    to {
        visibility: hidden
    }
}

.result-streaming > *:not(ol):not(ul):not(pre):last-child p:last-child::after,
.result-streaming > ol:last-child li:last-child::after,
.result-streaming > pre:last-child code::after,
.result-streaming > ul:last-child li:last-child::after {
    -webkit-animation: blink 1s steps(5, start) infinite;
    animation: blink 1s steps(5, start) infinite;
    content: "▋";
    display: inline-block;
    font-family: var(--vscode-editor-font-family);
    margin-left: 0.25rem;
    vertical-align: baseline;
}

.blinking-cursor::after {
}

@media (max-height: 560px) {
    .features-block {
        display: none !important;
    }
}

.answer-element-ext table {
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-collapse: separate;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    width: 100%;
    text-align: left;
}

.answer-element-ext th {
    background-color: var(--vscode-input-background);
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-width: 1px;
    padding: .25rem .75rem;
}

.answer-element-ext th:first-child {
    border-top-left-radius: .375rem;
}

.answer-element-ext th:last-child {
    border-right-width: 1px;
    border-top-right-radius: .375rem;
}

.answer-element-ext td {
    border-bottom-width: 1px;
    border-left-width: 1px;
    padding: .25rem .75rem;
}

.answer-element-ext td:last-child {
    border-right-width: 1px
}

.answer-element-ext tbody tr:last-child td:first-child {
    border-bottom-left-radius: .375rem;
}

.answer-element-ext tbody tr:last-child td:last-child {
    border-bottom-right-radius: .375rem;
}

.answer-element-ext a {
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

/* VSCode-themed HLJS syntax highlighting */
pre > code {
    color: var(--vscode-terminal-ansiBrightBlue);
}


.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-symbol {
  color: var(--vscode-symbolIcon-keywordForeground);
}

.hljs-params,
.hljs-variable {
    color: var(--vscode-symbolIcon-variableForeground);
}

.hljs-title {
    color: var(--vscode-symbolIcon-functionForeground);
}

.hljs-keyword {
    color: var(--vscode-symbolIcon-keywordForeground);
}

.hljs-attr,
.hljs-template-variable,
.hljs-type,
.hljs-string {
  color: var(--vscode-symbolIcon-stringForeground);
}

.hljs-selector-class,
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal {
  color: var(--vscode-symbolIcon-numberForeground);
}

/* Hard-code comments color - themes don't seem to use the comment css variable */
.hljs-comment {
    color: #5c6370;
}

.hljs-code,
.hljs-class .hljs-title {
  color: var(--vscode-symbolIcon-commentForeground);
}

.hljs-subst {
  color: var(--vscode-symbolIcon-textForeground);
}

.hljs-function,
.hljs-section,
.hljs-name,
.hljs-quote,
.hljs-class .hljs-id {
  color: var(--vscode-symbolIcon-functionForeground);
}

.hljs-regexp,
.hljs-link {
  color: var(--vscode-symbolIcon-referenceForeground);
}

.hljs-meta {
  color: var(--vscode-symbolIcon-metaForeground);
}

.hljs-tag,
.hljs-tag .hljs-title {
  color: var(--vscode-symbolIcon-propertyForeground);
}

.hljs-attribute,
.hljs-class .hljs-title,
.hljs-type {
  color: var(--vscode-symbolIcon-typeForeground);
}
